<template>
    <div class="login">
        <div class="logo-box">
            <img src="../../assets/images/lufei.jpg" class="logo">
        </div>
        <div class="form-box">
            <div class="form-group mb20">
                <label class="label-icon">
                    <img src="../../assets/images/ioc_1.png" />
                </label>
                <div class="input-group">
                    <input type="text" placeholder="请输入用户名" class="input input-login" v-model="userName">
                </div>
            </div>
            <div class="form-group">
                <label class="label-icon">
                    <img src="../../assets/images/ioc_2.png" />
                </label>
                <div class="input-group">
                    <input :type="pwdType" placeholder="请输入密码" class="input input-login" ref="pwd">
                    <div class="input-right-icon"  v-bind:class='{"login-pwd-icon-close":pwdIconClose,"login-pwd-icon-open":pwdIconOpen}' @click.prevent="changeInput()"></div>
                </div>
            </div>
        </div>
        <div class="oth-entrance">
            <div class="float-left reg-entr"><router-link to="/reg">快速注册</router-link></div>
            <div class="float-right forgetpwd-entr"><router-link to="/forget">忘记密码</router-link></div>
        </div>

        <div class="btn-group">
            <button class="btn btn-default login-btn" @click="login()">立即登录</button>
        </div>

    </div>
</template>

<script>
    import loginService from '../../service/loginService';
    export default {
        data() {
            return {
                pwdType:"password",
                pwdIconClose:true,
                pwdIconOpen:false,
                userName:""
            }
        },
        methods: {
            changeInput(){
                this.pwdIconClose = this.pwdIconClose == true ? false : true;
                this.pwdIconOpen = this.pwdIconOpen == true ? false : true;
                if(this.pwdIconClose) {
                    this.pwdType = "password";
                } else {
                    this.pwdType = "text";
                }
            },
            login() {
                var userName = this.userName,
                    pwd = this.$refs.pwd.value;
                if(userName == "") {
                    alert("请输入用户名");
                    return;
                } else if(pwd == "") {
                    alert("请输入密码");
                    return;
                }
                var params = {
                    userName:userName,
                    password:pwd
                }
                loginService.login(params)
                    .then(res =>{
                        if(res.ret == "0000") {
                            alert("登录成功");
                        } else {
                            alert(res.msg);
                        }
                    }) ;

            }
        }
    }
</script>

<style lang="scss">
    .logo-box {
        width: 100%;
        height: 10rem;
        text-align: center;
        img.logo {
            width:3rem;
            height: 3rem;
            margin-top:3.5rem;
        }
    }
    .form-box {
        padding: 0 1rem;
        .form-group {
            position: relative;
            width: 100%;
            label {
                position: absolute;
                width: 2rem;
                height: 2rem;
                left: 0;
                top: 0;
                z-index: 10;
                img {
                    width: 2rem;
                    height: 2rem;
                }
            }
            .input-group {
                position: relative;
                width:100%;
                input.input-login {
                    width:100%;
                    padding: 0 2rem;
                }
                .input-right-icon {
                    position: absolute;
                    width: 2rem;
                    height: 2rem;
                    top: 0;
                    right: 0;
                    z-index: 10;
                }
                .login-pwd-icon-close {
                    background: url(../../assets/images/ioc_3_clk.png) no-repeat;
                    background-size: 100% 100%;
                }
                .login-pwd-icon-open {
                    background: url(../../assets/images/ioc_3.png) no-repeat;
                    background-size: 100% 100%;
                }
            }
        }
    }
    .oth-entrance {
        padding: 0 1rem;
        height: 1.5rem;
        line-height: 1.5rem;
        div {
            float: left;
            width: 50%;
            font-size:.6rem;
            color: #333;
        }
        div.float-right {
            text-align: right;
        }
    }
    .btn-group {
        padding: 0 1rem;
    }
    .btn {
        background: transparent;
    }
    .login-btn {
        width:100%;
        border-radius: 5px;
        border:1px solid #999;
        line-height: 2rem;
        font-size: .9rem;
        margin-top: .5rem;
    }




</style>
